import React, {Component} from 'react';
import {connect} from "react-redux";
import {Table, Tag, Space, Button, Modal, Form, Input, message, Popconfirm, Popover} from 'antd';
import {InfoCircleTwoTone, CheckCircleOutlined, CloseCircleOutlined} from '@ant-design/icons'
import {getTodos, addTodo, updateTodoStatus} from '../../../API/API'
import {createSaveTitleAction,createSaveTodoCountAction} from "../../../redux/todo/todo_action";

import './index.css'

class Index extends Component {

    state = {
        //列表数据
        data: [],
        //新增弹窗是否显示
        formModelIsShow: false,
        //pageInfo分页信息
        pageTotal: 0,
        //当前页
        pageNum: 1,
    }

    //列表配置
    columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            width: 50,
            render:(text,record,index)=>{
                console.log(index)
                return <span>{index+1}</span>
            }
        },
        {
            title: '标题',
            dataIndex: 'title',
            width: 500,
            textWrap: 'word-break',
            render: (text,record) => {
                // console.log('record:',record)
                if (record.content){
                    return (
                        <Popover content={
                            <span>{record.content}</span>
                        }
                                 title="详细内容"
                                 trigger="click"
                        >
                            <Button>{text}</Button>
                        </Popover>
                    )
                }else {
                    return <span>{text}</span>
                }
            }
        },
        {
            title: '创建时间',
            dataIndex: 'createdate',
            width: 150,
        },
        {
            title: '状态',
            dataIndex: 'status',
            width: 150,
            render: (text) => {
                switch (text) {
                    case 1:
                        return <Tag icon={<InfoCircleTwoTone/>} color="blue">待办</Tag>
                    case 2:
                        return <Tag icon={<CheckCircleOutlined/>} color="green">已完成</Tag>
                    case 3:
                        return <Tag icon={<CloseCircleOutlined/>} color="red">放弃</Tag>
                    default:
                        return <Tag color="red">未知</Tag>
                }
            }

        },
        {
            title: '操作',
            width: 200,
            render: (text, record) => {
                return (
                    <>
                        <Popconfirm
                            title="确定吗？"
                            onConfirm={() => this.updateStatus(text.id, 1)}
                            onCancel={() => {
                            }}
                            okText="确定"
                            cancelText="取消"
                        >
                            <Button type="link">待办</Button>
                        </Popconfirm>

                        <Popconfirm
                            title="确定吗？"
                            onConfirm={() => this.updateStatus(text.id, 2)}
                            onCancel={() => {
                            }}
                            okText="确定"
                            cancelText="取消"
                        >
                            <Button type="link">完成</Button>
                        </Popconfirm>

                        <Popconfirm
                            title="确定吗？"
                            onConfirm={() => this.updateStatus(text.id, 3)}
                            onCancel={() => {
                            }}
                            okText="确定"
                            cancelText="取消"
                        >
                            <Button type="link">取消</Button>
                        </Popconfirm>
                    </>
                )
            }
        }

    ]

    //获取列表数据
    getTodoList = async () => {
        let page = {
            pageNum: this.state.pageNum,
            pageSize: 5
        }
        const {data} = await getTodos(page)
        console.log('列表数据', data)
        if (this.props.isLogin){
            this.setState({data: data.todos.records, pageTotal: data.todos.total})
            //给父组件传待办数量 这里也要放在rudux里面
            this.props.saveTodoCount(data.todoCount)
        }
    }
    //model点击OK事件
    handleFormModelOk = () => {
        //提交表单
        // console.log(this.formRef)
        this.formRef.submit()
    }
    //model点击取消事件
    handleFormModelCancel = () => {
        this.setState({formModelIsShow: false})
    }
    //表单提交事件
    handleFormSubmit = async (value) => {
        // console.log(value)
        const {data} = await addTodo(value)
        if (data.status === '200') {
            message.success(data.info)
        } else {
            message.error(data.info)
        }
        //关闭弹窗
        this.setState({formModelIsShow: false})
        //重新加载列表数据
        this.getTodoList()
    }

    //改变分页
    changePage = (pageNum) => {
        // console.log(pageNum)
        this.setState({pageNum}, () => {
            this.getTodoList()
        })
    }

    //修改todo的状态
    updateStatus = async (id, status) => {
        // console.log(id,status)
        const {data} = await updateTodoStatus({id, status})
        if (data.status === '200') {
            message.success(data.info)
        } else {
            message.error(data.info)
        }
        this.getTodoList()

    }

    componentDidMount() {
        if (this.props.isLogin) {
            this.getTodoList();
            //用路由后这里好像没办法了，所以放在了redux里面
            // this.props.getTitle('TODO_LIST')
            this.props.saveTitle('TODO_LIST')
        }
    }

    render() {
        const {data, formModelIsShow, pageTotal} = this.state
        return (
            <div className={'table'}>
                <Table
                    title={() => {
                        return (
                            <div>
                                <Button type={'primary'}
                                        onClick={() => this.setState({formModelIsShow: true})}>新建</Button>
                            </div>
                        )
                    }}
                    columns={this.columns}
                    rowKey={r => r.id}
                    dataSource={data}
                    pagination={{
                        total: pageTotal,
                        pageSize: 5,
                        onChange: this.changePage
                    }}
                />


                {/*弹出表单*/}
                <Modal title="新建"
                       destroyOnClose={true}
                       maskClosable={false}
                       visible={formModelIsShow}
                       okText={'提交'}
                       cancelText={'关闭'}
                       onOk={this.handleFormModelOk}
                       onCancel={this.handleFormModelCancel}
                >
                    <Form
                        ref={c => this.formRef = c}
                        onFinish={this.handleFormSubmit}
                        preserve={false}
                    >
                        <Form.Item
                            labelCol={{span: 4}}
                            name={'title'}
                            label={'标题'}
                            rules={[{required: true, message: '不能为空'}]}
                        >
                            <Input/>
                        </Form.Item>
                        <Form.Item
                            labelCol={{span: 4}}
                            name={'content'}
                            label={'详细内容'}
                        >
                            <Input.TextArea rows={4}/>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        );
    }
}

export default connect(
    (state) => {
        return {isLogin: state.userInfo.isLogin}
    }, {
        saveTodoCount:createSaveTodoCountAction,
        saveTitle:createSaveTitleAction
    })(Index);